<template>
  <div :id="id"></div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
  name: "Theta_chart",
  props: {
    id:{
      type:String,
      required: true,
    },
    dataType:{
      type:Array,
      required: true,
    },
    width: {
      // 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
      // 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
      type: Number,
      // 定义是否必须传
      required: false,
      // 定义默认值
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
  },
  mounted() {
    this.getPlot()
  },
  methods: {
    getPlot() {
      // console.log('tree')
      const chart = new Chart({
        container: this.id,
        width: 400,
        height: 400,
      });

      chart.coordinate({ type: 'theta', innerRadius: 0.25, outerRadius: 0.8 });

      chart
          .interval()
          .data(this.dataType)
          .transform({ type: 'stackY' })
          .encode('y', 'value')
          .encode('color', 'id')
          .legend('color', { position: 'top',
            maxRows:2,maxCols:1,
            navOrient: 'vertical',
            layout: { justifyContent: 'center' } })
          .scale('color', {
            range: ['#7593ed', '#95e3b0', '#6c7893', '#e7c450', '#7460eb'],
          })
          // .label({
          //   text: 'value',
          //   fontWeight: 'bold',
          //   offset: 14,
          // })
          // .label({
          //   text: 'id',
          //   position: 'spider',
          //   connectorDistance: 0,
          //   fontWeight: 'bold',
          //   textBaseline: 'bottom',
          //   textAlign: (d) => (['c', 'sass'].includes(d.id) ? 'end' : 'start'),
          //   dy: -4,
          // })
          .style('radius', 4)
          .style('stroke', '#fff')
          .tooltip({
            // title: 'id', // 标题
            items: [
              (d, index, data, column) => ({
                name: d.id, // 指定 item 的名字
                value: d.value, // 使用 y 通道的值
              }),
            ], // 数据项
          })
          // .style('lineWidth', 2)
          .animate('enter', { type: 'waveIn' })
          // .legend(false);

      chart.render();

    }
  }
}
</script>

<style scoped>

</style>
